<template>
  <div class="del">
    <!-- 员工添加 -->
    <div class="add_Mployee">
      <div>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="80"></el-avatar>
      </div>
      <div>
        部门:
        <el-select v-model="delbranch" placeholder="请选择部门" class="size">
          <el-option v-for="(item,index) in deloptions" :label="item" :value="index" :key='index'></el-option>
        </el-select>
      </div>
      <div>
        工号:
        <el-input v-model="delCode[delbranch]" placeholder="请输入工号" class="size"></el-input>
      </div>
      <div>
        职位:
        <el-input v-model="delpost" placeholder="请输入职位" class="size"></el-input>
      </div>
      <div>
        姓名:
        <el-input v-model="delname" placeholder="请输入姓名" class="size"></el-input>
      </div>
      <div>
        账号:
        <el-input v-model="deluser" placeholder="请输入账号" class="size"></el-input>
      </div>
      <div>
        密码:
        <el-input v-model="delpass" placeholder="请输入密码" class="size"></el-input>
      </div>
      <div class="btn">
        <el-button type="danger" class='btnsize' @click = 'sendData()'>删除</el-button>
        <el-button class='btnsize'>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //部门选项
        deloptions: ['教学部', '就业部', '招生部', '后勤部'],
        //部门
        delbranch: '',
        // 工号
        delCode: ['JX', 'JY', 'JS', 'HQ'],
        delpost : '',
        //姓名
        delname: '',
        //账号
        deluser: '',
        //密码
        delpass: '',
        delMployeeData: {
          delbranch: '',
          delCode: '',
          delpost : '',
          delname: '',
          deluser: '',
          delpass: ''
        }
      }
    },
    methods:{
      sendData:function(){
        this.delMployeeData.delbranch = this.deloptions[this.delbranch];
        this.delMployeeData.delCode = this.delCode[this.delbranch];
        this.delMployeeData.delpost = this.delpost;
        this.delMployeeData.delname = this.deldelname;
        this.delMployeeData.deluser = this.deluser;
        this.delMployeeData.delpass = this.delpass;
      }
    }

  }
</script>

<style scoped="scoped">
  .del {
    width: 100%;
    /* background-color: red; */
  }

  .add_Mployee {
    width: 500px;
    height: 630px;
    box-shadow: 5px 0px 5px #ccc, -5px 0px 5px #ccc;
    border: 3px solid #ccc;
    margin: 0 auto;
    background-color: #FFFFFF;
  }

  .add_Mployee div {
    margin-top: 15px;
  }

  .size {
    width: 300px;
  }

  .btnsize {
    width: 150px;
    margin-left: 15px;
  }
</style>
